<template>
  <div class="about center" @click="clickAbout()">
    <form action="#" @submit.prevent="submitForm()">
      username:
      <input
        type="text"
        v-model="username"
        @blur="validata"
        @keyup.13="login()"
      />
      <span :class="['valid-msg', isPass ? 'green' : 'red']">
        {{ msg }}
      </span>
      <div>
        <input type="submit" />
      </div>
    </form>
    <div class="box"></div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      msg: '',
      username: '',
      isPass: false
    }
  },
  methods: {
    validata() {
      let reg = /(^[\u4e00-\u9fa5]{2,5}$)|(^[a-z]{4,15}$)/
      let username = this.username
      if (!username) {
        this.msg = '请输入用户名'
        this.isPass = false
        return false
      }
      if (!reg.test(username)) {
        this.msg = '中文名2-6位，英文名4-16位'
        this.isPass = false
        return false
      }
      this.msg = '用户名正确'
      this.isPass = true
      return true
    },
    clickAbout() {
      console.log('about')
    },
    clickBox() {
      console.log('box')
    },
    submitForm() {
      console.log('表单提交')
    },
    login(e) {
      console.log(e)
      location = 'http://www.baidu.com'
    }
  }
}
</script>

<style lang="less" scoped>
.about {
  width: 12rem;
  margin: 0 auto;
  font-size: 0.32rem;
  input {
    height: 0.4rem;
    font-size: 0.32rem;
  }
  .red {
    color: red;
  }
  .green {
    color: green;
  }
  .box {
    width: 1rem;
    height: 1rem;
    background-color: yellow;
  }
}
</style>
